<template>
	<view class="container">
	  <div class="topTitle">预警信息</div>
		<div class="centerTitle">
			<div class="left">
				<div></div>
				<p>当前生效预警({{curCount}}个)</p>
			</div>
			<div class="queryButton">
				<up-button :type="currentIndex == 0 ? 'primary' : ''" class="custom-style" @click="showAllId(0)">全部</up-button>
				<up-button :type="currentIndex == 1 ? 'primary' : ''" class="custom-style" @click="showOnlyId(1)">市本级</up-button>
				<up-button :type="currentIndex == 2 ? 'primary' : ''" class="custom-style" @click="showExcludeId(2)">县区级</up-button>


			</div>
		</div>
		<div v-if="filteredList.length == 0 " class="noWarm">
			当前无预警
		</div>
		<div class="warm"  v-else>
			<div class="box"  v-for="item in filteredList" :key="item.id" @click="toggleItem(item.id)">
				<div class="left">
					<image :src="('../../static/warning/'+item.signal+'.png')" mode="heightFix"></image>
				</div>
				<div class="right">
					<div class="title">
						<p>{{item.county}}气象台发布{{item.signal}}预警</p>
						<p>{{item.time}}</p>
					</div>
					<div v-show="stateMap[item.id]">
						<p>{{item.title}}</p>
						<p>防御措施：</p>
						<p>{{item.cuoshi}}</p>
					</div>
				</div>
			</div>
		</div>	
	</view>
</template>

<script setup>
	import { ref, reactive,	onMounted, computed } from 'vue';
	import { onLoad,onUnload } from '@dcloudio/uni-app';
	import common from '@/static/js/common.js';
	
	const warmList = ref([]);  //当前生效的所有预警信息等
	let wramCount = ref(0); //当前生效的预警条数
	let curCount = ref(0); //当前选择的预警条数
	const warnTimer= ref(null); //事件监听
	const currentIndex= ref(0); 
	// 使用对象存储状态，键为ID
	const stateMap = reactive({});
	const currentFilter = reactive({      // 当前过滤条件
	  type: 'all',    // 过滤类型：'only' | 'exclude' | 'all'
	  id: "57297"        // 信阳市气象台的STATIONID 57297
	});
	const filteredList = computed(() => {
		if (currentFilter.type === 'only') {
			let sekectList1 = warmList.value.length > 0 ? warmList.value.filter(item => item.stationId === currentFilter.id) : [];
			sekectList1.length > 0 ? stateMap[sekectList1[0].id] = true : '';
			curCount.value = sekectList1.length;
			return sekectList1;
		} else if (currentFilter.type === 'exclude') {
				let sekectList2 = warmList.value.length > 0 ? warmList.value.filter(item => item.stationId !== currentFilter.id) : [];
				sekectList2.length > 0 ? stateMap[sekectList2[0].id] = true : '';
				curCount.value = sekectList2.length;
				return sekectList2;
		} else {
			let sekectList3 = warmList.value.length > 0 ? [...warmList.value] : [];
			sekectList3.length > 0 ? stateMap[sekectList3[0].id] = true : '';	
			curCount.value = sekectList3.length;
			return sekectList3;
		}
	}); //过滤后的预警信息
		
	// 显示指定ID的数据
	const showAllId = (index) => {
		currentIndex.value = index;
		currentFilter.type = 'All';
	};			
	// 显示指定ID的数据
	const showOnlyId = (index) => {
		currentIndex.value = index;
	  currentFilter.type = 'only';
	};
	
	// 排除指定ID的数据
	const showExcludeId = (index) => {
		currentIndex.value = index;
	  currentFilter.type = 'exclude';
	};
	
	//实现点击显示或隐藏具体的预警内容
	const toggleItem = (id) => {
		 stateMap[id] = !stateMap[id];
	}
	// 根据行政区划编号和当前时间获取生效的预警数据
	const initWarningDataByCode = () => {
		let query= {
			time: common.getCurrentFormattedDateTime(),
			cityCode: '411500', //默认为信阳411500
			type: 'down'
		};
		uni.showLoading({
			
		})
		uni.request({
			url: `http://218.28.7.243:10003/Weather/SWP?projectname=&calltype=4&u=hnqx&p=0790affb28cf9b9774785ac680d44ca2&tk1737007626192&iquery=NewAlmt.GetDataDetailByAreaCodesAndQueryTime|1|String;${query.cityCode}|Boolean;true|String;${query.type}|DateTime;${query.time}|Int32;-1|Int32;-1`,
			success: (res) => {
					uni.hideLoading()
				    let arr= res.data.Rows;
					 // console.log(arr,2222)
				    if(arr.length>0) {
				      // 遍历接口返回的数组，递归遍历，新增/删除/不变三种操作
				      if(warmList.length==0) {  //当之前的预警数组不存在，那么直接把所有的push进去
								warmList.length = 0;
				        arr.forEach((item,index) => {
				          warmList.value.push({
				            title: item.ISSUECONTENT,
										cuoshi: item.DEFENSEGUIDE,
				            signal: item.SIGNALTYPE + item.SIGNALLEVEL,
										time: item.ISSUETIME2,
				            id: item.ID,
										stationId: item.STATIONID,
										county: item.AREANAME
				          })
									 stateMap[item.ID] = false;
				        });
				      } else {
				        warmList.value.forEach((warnItem,warnIndex) => { //遍历上次的预警列表
				          if(arr.some(item => item.ID== warnItem.id)) {  //接口中存在某一项，不做操作
				
				          } else {  //表示接口中不存在这一项，删除该条数据
				            warmList.value.splice(warnIndex,1);
				          }
				        })
				
				        arr.forEach((item,index) => {   //遍历接口返回的预警信息
				          if(warmList.value.some(warnItem => warnItem.id== item.ID)) { //存在该项，不做操作
				
				          } else {  //表示预警列表中不存在该项，加进去
				            warmList.value.push({
											title: item.ISSUECONTENT,
											cuoshi: item.DEFENSEGUIDE,
											signal: item.SIGNALTYPE + item.SIGNALLEVEL,
											time: item.ISSUETIME2,
											id: item.ID,
											stationId: item.STATIONID,
											county: item.AREANAME
				            })
										stateMap[item.ID] = false;
				          }
				        });
				      }
							wramCount.value = arr.length;
				    } else {
				      warmList.length = 0;
							wramCount.value = 0;
							curCount.value = 0;
				    }
			},
		})
	};
		
		// 页面加载时处理数据
		onLoad(() => {
			  setTimeout(() => {
			    initWarningDataByCode();
			  }, 10);
			// initWarningDataByCode();
			// 每10秒钟调一下预警接口 
			warnTimer.value= setInterval(() => {
				initWarningDataByCode();
			}, 10000);
		})
	
		onUnload(() => {
			if(warnTimer.value) {
				 clearInterval(warnTimer.value);
			}
		})
</script>

<style lang="scss" scoped>
	* {
		scrollbar-width: none; /* 隐藏滚动条（适用于较新版本的浏览器） */
	}
	.container {
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		position: fixed;
		top: 0%;
		bottom: 0%;
		left: 0;
		right: 0;
		font-family: PingFangSC, PingFang SC;
		background-color: rgb(233, 243, 255);
		overflow-y: scroll;
		width: 100vw;
		.topTitle {
			width: 100vw;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			background-color: rgb(90, 150, 247);
			text-align: center;
			color: white;
			font-size: 40rpx;
			font-weight: 500;
		}
		.centerTitle {
			width: 100vw;
			margin-top: 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 2rpx solid rgba(70,139,251,0.6);
			.left {
				display: flex;
				div {
					width: 6rpx;
					height: 28rpx;
					background: #468BFB;
					border-radius: 0rpx 4rpx 4rpx 0rpx;
				}
				p {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					margin-left: 16rpx;
					font-size: 30rpx;
					color: #333333;
					line-height: 28rpx;
				}
			}
			.queryButton {
				display: flex;
			}
			.custom-style {
				margin-right: 20rpx;
				font-size: 26rpx;
				width: 110rpx;
				height: 50rpx;
				border-radius: 15rpx;
				border: 1px solid #ccc;
			}
		}
		.noWarm {
			background-color: #fff;
			text-align: center;
			color: #999999;
			font-family: YouSheBiaoTiHei;
			font-size: 50rpx;
			font-style: italic;
			font-weight: 450;
			width: 100vw;
			line-height: 200rpx;
		}
		.warm {
			width: 100vw;
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx 30rpx 5rpx 30rpx;
			.box {
				width: 100%;
				margin-bottom: 30rpx;
				display: flex;
				.left {
					width: 15%;
					image {
						height: 92rpx; 
					}
				}
				.right {
					// width: 70%;
					margin-left: 30rpx;
					.title {
						margin-bottom: 10rpx;
					}
				
					p {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
				
						white-space: pre-wrap;
					}
					p:nth-child(2) {
						font-weight: 550;
					}
					.title p:nth-child(1) {
						font-weight: 550;
					}
					.title p:nth-child(2) {
						font-size:24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
				.arrow {
					transition: all 1s ease-out;
				}
			}
		}

	}
</style>
